<meta title="店铺分类管理"/>
<div class="p">
    <div>
        <ol class="breadcrumb" s="tpl" id="breadcrumb" s-data="{}">
            <li class="file-dir" data-id="0"><a href="javascript:;">根分类</a></li>
            {%$.each(path_stack, function(i){%}
            <li>
                <a href="javascript:;" class="file-dir" data-id="{%=this.id%}" data-idx="{%=i%}">{%=this.title%}</a>
                <button type="button" s="tooltip" title="添加引用" class="btn btn-default btn-xs" s-click="refAdd(path_stack[{%=i%}])">
                    <i class="fa fa-plus"></i>
                </button>
            </li>
            {%})%}
            <li>
                <button type="button" id="addBtn" class="btn btn-warning btn-xs" s-click="add()">
                    <i class="fa fa-plus"></i> 新增
                </button>
                <button type="button" class="btn btn-primary btn-xs" s-click="saveSort()">
                    <i class="fa fa-sort"></i> 保存排序
                </button>
                <button type="button" class="btn btn-default btn-xs" s-click="batchSetIcon()">
                    <i class="fa fa-image"></i> 批量设图
                </button>
                <button type="button" class="btn btn-default btn-xs s-loading-icon" s-click="return $shopcatsGrid.refresh()">
                    <i class="fa fa-refresh s-loading-spinner"></i>
                </button>
            </li>
        </ol>
    </div>
    <div id="shopcatsGrid"
         s='datac,nda'
         s-data="Smart.cleanJsonRef(S.get('/api/shopcat/list/' + parentId))">
        <table class="table table-striped table-bordered table-hover">
            <tr>
                <th>图标</th>
                <th>ID</th>
                <th>分类名</th>
                <th>关键字</th>
                <th>查询方式</th>
                <th>淘宝类目ID</th>
                <th>京东类目ID</th>
                <th>拼多多类目ID</th>
                <th>状态</th>
                <th class="text-right">操作</th>
            </tr>
            <tbody s="loop">
            <tr s-loop-role="empty">
                <td colspan="10">暂无分类</td>
            </tr>
            <tr s-loop-role="row" s="datac" class="shopcat">
                <td s="tpl">
                    <img class="sorthandle" src="{%=this.iconUrl || '/images/upload-bg.jpg'%}" s-click="selectIcon(this)"
                         style="max-width: 50px; max-height: 50px;"/>
                    <input type="hidden" class="shopcat-icon" value="{%=this.iconUrl%}"/>
                </td>
                <td name="id"></td>
                <td s="tpl">
                    <input type="hidden" class="shopcat-id" value="{%=this.id%}" />
                    <span name="title">{%=this.title%}</span>
                    {%if(this.ref){%}
                    <label class="label label-warning" >{%=this.ref.title%}</label>
                    {%}%}
                </td>
                <td name="keyword"></td>
                <td s="tpl">
                    <span>
                        {%if(this.searchByKeyword){%}
                        关键字
                        {%} else {%}
                        类目ID
                        {%}%}
                    </span>
                </td>
                <td >
                    <span name="taobaoCatId"></span>
                    <div name="taobaoCatName"></div>
                </td>
                <td >
                    <span name="jdCatId"></span>
                    <div name="jdCatName"></div>
                </td>
                <td >
                    <span name="pddCatId"></span>
                    <div name="pddCatName"></div>
                </td>
                <td s="tpl">
                    <span class="label {%=this.status=='ENABLED' ? 'label-success' : 'label-default'%}">{%=this.statusTitle%}</span>
                </td>
                <td class="text-right">
                    <input type="button" class="btn btn-xs btn-primary" value="选品" s-click="itemSelection(this)"/>
                    <button type="button" class="btn btn-warning btn-xs" s-click="refAdd(this.parent().data())">
                        <i class="fa fa-plus"></i> 引用
                    </button>
                    <input autocomplete="off" type="button" class="btn btn-xs btn-default" value="外部类目" s-click="showOutCat(this)"/>
                    <input autocomplete="off" type="button" class="btn btn-xs btn-info" value="编辑" s-click="edit(this)"/>
                    <input autocomplete="off" type="button" class="btn btn-xs btn-danger" s-click="del(this)" value="删除" />
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    var parentId = 0;

    var path_stack = [];

    function add() {
        S.popupOpen("shopcat/shopcat-add.html", {parentId: parentId}).done(function (flag) {
            flag && $shopcatsGrid.refresh();
            setTimeout(function() {
                $addBtn.node.focus()
            }, 500)
        })
    }
    function refAdd(ref) {
        S.popupOpen("shopcat/shopcat-add.html", {parentId: parentId, ref: ref}).done(function (flag) {
            flag && $shopcatsGrid.refresh();
            setTimeout(function() {
                $addBtn.node.focus()
            }, 500)
        })
    }

    $shopcatsGrid.node.delegate(".shopcat", 'dblclick', function(e) {
        var node = $(e.currentTarget);
        var $node = Smart.of(node);
        var data = $node.data();
        loadShopcat(data.id);
        path_stack.push(data);
        $breadcrumb.refresh();
    })

    $breadcrumb.node.delegate('.file-dir', 'click', function(e) {
        var node = $(e.currentTarget);
        var idx = parseInt(node.attr("data-idx"));
        var id = node.attr("data-id");
        if(id == parentId) {
            return;
        }
        if(id == 0) {
            path_stack = [];
        } else {
            path_stack = path_stack.slice(0, idx + 1);
        }
        loadShopcat(id);
        $breadcrumb.refresh();
    })

    function loadShopcat(pid) {
        parentId = pid;
        $shopcatsGrid.refresh();
    }

    function del($this) {
        S.confirm("确定删除吗？").done(function() {
            var data = $this.parent().data();
            var id = data.id;
            S.remove("/api/shopcat/" + id).done(function() {
                $shopcatsGrid.refresh();
            })
        })
    }

    function edit($this) {
        var data = $this.parent().data();
        S.popupOpen("/shopcat/shopcat-edit.html", {shopcat: data}).done(function(rs) {
           rs && $shopcatsGrid.refresh();
        })
    }

    function showOutCat($this) {
        var data = $this.parent().data();
        S.popupOpen("/shopcat/outCatToShopcat-list.html", {shopcatId: data.id}).done(function(rs) {
        })
    }

    function itemSelection($this) {
        var data = $this.parent().data();
        S.popupOpen("/itemSelection/itemSelectionList.html", {shopcat: data}).done(function() {

        })
    }

    function saveSort() {
        var nodes = S.node.find(".shopcat-id")
        var idList = []
        nodes.each(function() {
            idList.push($(this).val())
        })
        S.put("/api/shopcat/sort", {
            idList: idList
        }).done(function() {
            S.toast("排序保存成功", 'success')
            $shopcatsGrid.refresh();
        })
    }

    function selectIcon($this, autoSelect) {
        var deferred = $.Deferred();
        S.popupOpen("/oss/objects-selector.html", {prefix: 'shopcat-icon', name: $this.parent().data().title, autoSelect: autoSelect}).done(function(datas) {
            if(datas) {
                var data = $this.parent().data()
                var icon = datas[0];
                S.put("/api/shopcat/icon/" + data.id, {
                    icon: icon.key
                }).done(function() {
                    $this.parent().data($.extend(data, {
                        icon: icon.key,
                        iconUrl: icon.url,
                    })).done(function() {
                        deferred.resolve()
                    })
                })
            }
        })
        return deferred.promise()
    }

    function batchSetIcon() {
        var iconInputs = S.node.find(".shopcat-icon");
        function doSelectIcon(i) {
            if(i == iconInputs.length) {
                S.toast("设置完成", 'success')
                return
            }
            var iconInput = $(iconInputs.get(i))
            if(iconInput.val()) {
                doSelectIcon(i+1)
                return
            }
            var $this = Smart.of(iconInput)
            selectIcon($this, true).done(function() {
                doSelectIcon(i+1)
            })
        }
        doSelectIcon(0)
    }

    $shopcatsGrid.node.find("tbody").sortable({
        handle: ".sorthandle"
    });
</script>